<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>归档</title>
</head>

<body>
    <div id="app">
        <nav th:replace="/fragment/nav::nav1"></nav>

        <div class="ui container">
            <year-box v-for="archive in archives" :box="archive"></year-box>
            <br><br><br><br><br><br><br><br><br><br><br>
        </div>

        <footer th:replace="/fragment/footer::f1"></footer>
    </div>

    <script th:replace="/fragment/script::jquery"></script>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template id="year-box">
        <div style="width:80%">
            <year-label :label="box"></year-label>
            <div class="ui fluid vertical menu">
                <year-item v-for="i in box.list" :item="i"></year-item>
            </div>
        </div>
    </template>
    <template id="year-label">
        <div class="ui two column grid">
            <div class="column">
                <h2 class="ui header" style="display: inline-block;">
                    <span style="font-size: 1.5em;">{{label.year}}</span>归档
                </h2>
            </div>
            <div class="right aligned column">
                共 <span class="ui orange header">{{label.total}}</span>篇
            </div>
        </div>
    </template>
    <template id="year-item">
        <a :href="`/article/${item.bid}`" class="item">
            <span>
                <i class="teal circle icon"></i>{{item.title}}
                <div class="ui teal basic label">{{item.date}}</div>
            </span>
            <div v-if="item.attr==0" class="ui orange left pointing label">原创</div>
            <div v-else class="ui green left pointing label">转载</div>
        </a>
    </template>
    <script>
        var ajax = {
            data() {
                return {
                    archives: []
                }
            },
            mounted() {
                getJson('/getArchives/[[${session.uid}]]', (a) => {
                    this.archives = a;
                });
            }
        }
        var app = Vue.createApp(ajax)
        app.component('year-label', {
            props: ['label'],
            template: '#year-label'
        }).component('year-box', {
            props: ['box'],
            template: '#year-box'
        }).component('year-item', {
            props: ['item'],
            template: '#year-item'
        })
        app.mount('#app')
    </script>
</body>

</html>